<template>
    <div class="submenu">
        <template v-for="permission in permissionVoList">
            <el-submenu :index="permission.permissionUrl" :key="permission.id"  v-if="permission.permissionType == 'DIR' && permission.childs">
                <template slot="title">
                    <i class="iconfont" v-if="permission.icon != null && permission.icon != ''">{{permission.icon}}</i>
                    <i class="el-icon-menu" v-else></i>
                    <span>{{permission.permissionName}}</span>
                </template>
                <slide-menu-item :permissionVoList="permission.childs"></slide-menu-item>
            </el-submenu>
            <el-menu-item v-else-if="permission.permissionType == 'MENU'" :index="permission.permissionUrl" :key="permission.id">
                <i class="iconfont" v-if="permission.icon != null && permission.icon != ''">{{permission.icon}}</i>
                <i class="el-icon-menu" v-else></i>
                {{permission.permissionName}}
            </el-menu-item>
        </template>
    </div>
</template>
<script>
export default {
  name: "SlideMenuItem",
  props: {
    permissionVoList: Array
  }
};
</script>

<style lang="stylus" scoped>
    @import '~assets/css/style.styl';

    .el-menu-item i {
        color: $menuFontColor!important
    }
    .el-menu--popup i{
        color #909399!important
    }
</style>

